import React from 'react';
import { Menu } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';

const Layout = () => {
  return (
    <Container>
      <Aside>
        <Menu mode="horizontal">
          <Menu.Item key="menu" icon={<SettingOutlined />}>
            <Link to="/">Index</Link>
          </Menu.Item>
        </Menu>
      </Aside>
    </Container>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-columns: 16rem 1fr;
  width: 100%;
`;

const Aside = styled.aside`
  background-color: rgb(244, 245, 247);
  display: flex;
`;

export default Layout;
